<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>资金流水</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">资金流水列表</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row" style="margin-bottom:1%">
                    <div class="layui-form" style="float:right;">
                        <div class="layui-form-item" style="margin:0;">
                        <div class="layui-input-inline">
		                    <input type="text" name="createTimeStart" id="createTimeStart" autocomplete="off" placeholder="开始时间" class="layui-input">
		                  </div>
		                  <div class="layui-input-inline">
		                    <input type="text" name="createTimeEnd" id="createTimeEnd" autocomplete="off" placeholder="结束时间" class="layui-input">
		                  </div>
		                  <div class="layui-input-inline">
		                    <input type="text" name="orderId" id="orderId" placeholder="业务单号" autocomplete="off" class="layui-input">
		                  </div>
		                  <div class="layui-input-inline">
		                    <select name="fundDirection" id="fundDirection" lay-search="">
		                      <option value="">资金变动方向</option>
		                      <option value="1">加款</option>
		                      <option value="2">减款</option>
		                    </select>
		                  </div>
		                  <div class="layui-input-inline">
		                    <select name="bizType" id="bizType" lay-search="">
		                      <option value="">业务类型</option>
		                      <option value="1">支付</option>
		                      <option value="2">提现</option>
		                      <option value="3">调账</option>
		                      <option value="4">充值</option>
		                      <option value="5">差错处理</option>
		                      <option value="6">代付</option>
		                    </select>
		                  </div>
                        <button id="search" class="layui-btn" data-type="reload">搜索</button>
                        </div>
                    </div>
                </div>
                <table id="zjlsList"></table>
            </div>
        </div>
    </div>
</div>
<script>
     //标题内容模板
     var tplTitle = function(d){
            return '<a class="layui-btn layui-btn-xs layui-btn-primary" lay-href="account/history/detail/id='+ d.id +'">查看</a> '
        };


     layui.use(['table','util','form','laydate'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,laydate = layui.laydate
        ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

         var tplAmount = function(d){
             if(d.fundDirection == 1) {
                 return "<span style='color: darkgreen'>+ </span>" + d.amount/100;
             }else if(d.fundDirection == 2) {
                 return "<span style='color: orangered'>- </span>" + d.amount/100;
             }
         };

        table.render({
            elem: '#zjlsList'
            ,url: layui.setter.baseUrl + '/account/history_list'
            ,where: {
                access_token: layui.data(layui.setter.tableName).access_token
            }
            ,id: 'tableReload'
            ,cols: [[
                {field:'id', title: '流水号', sort: true }
                ,{field: 'balance',title: '变更前余额(元)',templet: '<div>{{d.balance/100}}</div>'}
                ,{field: 'amount',title: '变更金额(元)',templet: tplAmount}
                ,{field: 'balance',title: '变更后余额(元)',templet: '<div>{{d.afterBalance/100}}</div>'}
                ,{field: 'bizType',title: '业务类型',templet: '<div>{{d.bizType == 1?"支付":d.bizType == 2?"提现":d.bizType == 3?"调账":d.bizType == 4?"充值":d.bizType == 5?"差错处理":d.bizType == 6?"代付":""}}</div>'}
                ,{field: 'orderId',title: '业务订单' ,width: 270}
                ,{field: 'orderAmount',title: '订单金额(元)',templet: '<div>{{d.orderAmount/100}}</div>'}
                ,{field: 'fee',title: '手续费(元)',templet: '<div>{{d.fee/100}}</div>'}
                ,{field:'createTime',  title: '时间',width: 180, templet: '<div>{{ layui.util.toDateString(d.createTime) }}</div>' }
                /*,{field:'edite', title: '操作', templet: tplTitle }*/
            ]]
            ,page: true
            ,skin: 'line'
        });

        // 搜索
        var $ = layui.$, active = {
            reload: function(){
		          var createTimeStart = $('#createTimeStart').val();
		          var createTimeEnd = $('#createTimeEnd').val();
		          var orderId = $('#orderId').val();
		          var fundDirection = $("#fundDirection").val();
		          var bizType = $("#bizType").val();
		          //执行重载
		          table.reload('tableReload', {
		            page: {
		              curr: 1 //重新从第 1 页开始
		            }
		            ,where: {
		              orderId: orderId,
		              fundDirection : fundDirection,
		              createTimeStart : createTimeStart,
		              createTimeEnd : createTimeEnd,
		              bizType : bizType
		            }
		          });
		        }
        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        laydate.render({
	        elem: '#createTimeStart'
	        ,type: 'datetime'
	        ,format: 'yyyy-MM-dd HH:mm:ss'
	      });

	      laydate.render({
	        elem: '#createTimeEnd'
	        ,type: 'datetime'
	        ,format: 'yyyy-MM-dd HH:mm:ss'
	      });

        // 渲染表单
        form.render();


     })
</script>